(function(){
    class Snake{
        constructor(obj){
            obj = obj instanceof Object ? obj : {};

            this.width = obj.width || 10;
            this.height = obj.height || 10;
            this.elements = [];
            this.items = [
                {x:2,y:2,color:'red'},
                {x:1,y:2,color:'blue'},
                {x:0,y:2,color:'blue'}
            ];
            this.direction = "right";
        }
        render(box){
            for(const item of this.items){
                const ele = document.createElement('span');

                ele.style.position = 'absolute';
                ele.style.width = this.width + 'px';
                ele.style.height = this.height + 'px';
                ele.style.left = (item.x * this.width) + 'px';
                ele.style.top = (item.y * this.height) + 'px';
                ele.style.backgroundColor = item.color;

                box.appendChild(ele);
                this.elements.push(ele);
                console.log(ele);
                console.log(item.left);
                console.log(item.top);
                console.log(item.backgroundColor);
                console.log(ele.style.left);
                console.log(ele.style.top);
                console.log(ele.style.backgroundColor);
            }
        }
        update(){
            for(let i = this.items.length -1; i > 0 ;i--){
                this.items[i].x = this.items[i-1].x;
                this.items[i].y = this.items[i-1].y;

            }
            switch(this.direction){
                case 'left':
                    this.items[0].x -= 1;
                    break;
                case 'right':
                    this.items[0].x += 1;
                    break;
                case 'up':
                    this.items[0].y -= 1;
                    break;
                case 'down':
                    this.items[0].y += 1;
                    break;

            }
        }
        remove(box){
            for(const ele of this.elements){
                box.removeChild(ele);
            }
            this.elements = [];
        }
    }
    window.Snake = Snake;

})();